// 1. 导入 createStore 一会用于创建 store
import { createStore } from "vuex";

import stu from './stu'

// 2. 创建一个 store, 一会用于导出, 挂载到入口函数中
const store = createStore({
    state() {
        return {
            num: 10086,
            num2: 10010,
            num3: 12345,
            name: "张三",
        };
    },
    mutations: {
        /**
         *  当前选项内存储 vuex 内唯一的 修改 state 内数据的方法
         *
         *      但是内部按照流程只允许出现同步代码
         *      异步代码需要放在 actions 选项中
         */
        addNum(state, data) {
            /**
             *  第一个形参: 就是当前的 state 选项
             *  第二个形参: 当外界调用 addNum 的时候, 传递的值
             */
            state.num++;
        },
        setName(state, data) {
            state.name = data;
        },
    },
    actions: {
        /**
         *  当前选项类似于 mutations 中的方法
         *
         *      内部主要存储对于异步方法的处理, 等待异步方法执行完毕的时候
         *      调用 mutations 中的方法, 修改 state 内的数据
         */
        asyncAddNum(context, data) {
            /**
             *  当前两个形参
             *
             *  第一个形参: 是当前的上下文, 可以利用第一个形参获取 state 中的数据, 或者调用 mutations 中的方法
             *  第二个形参: 外界调用当前方法的时候传递进来的参数
             */

            // 此时应该书写一个异步代码, 比如 发送一个 ajax 请求, 但是没有合适的请求地址, 所以书写一个 倒计时器代替
            setTimeout(() => {
                // context.commit('setName', data)
                context.commit("addNum");
            }, 1000);
        },
    },
    getters: {
        // 可以理解为 vuex 中的计算属性
        getterName (state) {
            return state.name + '_getters'
        }
    },
    modules: {
        stu
    }
});

// 3. 导出 store
export default store;
